{% extends 'Shared/layout.volt' %}
{% block title %}编辑API{% endblock %}
{% block styles %}
<script type="text/javascript" src="{{ url('static/vue/2.5.2/vue.min.js') }}"></script>
{% endblock %}
{% block content %}
    <section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
            <a href="/" title="首页">首页</a>
            <span class="c-gray en">&gt;</span>
            开放API
            <span class="c-gray en">&gt;</span>
            API编辑
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
        </nav>
        <div class="Hui-article">
            <article class="cl pd-20">
                <form action="{{ url('connector/edit') }}" id="form-connector-edit" method="post" class="form form-horizontal" novalidate="novalidate">
                    <input type="hidden" name="connector_id" value="{{ Model.connector_id }}" id="connector-id" v-model="Model.connector_id">
                    <table class="table table-border table-bordered table-bg table-large">
                        <thead><tr><th>名称及描述</th></tr></thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3" for="group_code"><span class="c-red">*</span><span class="sub-text">分组：</span> </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <select name="group_code" id="group_code" class="input-text" style="width: 33%" v-model="Model.group_code">
                                            <option value="0">全部分类</option>
                                            <option value="1">分类一</option>
                                            <option value="2">分类二</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span><span class="sub-text">API名称：</span> </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <input type="text" class="input-text valid" style="width: 33%" v-model.trim="Model.connector_name" placeholder="API名称" id="connector-name" name="connector_name">
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3" for="authenticate"><span class="c-red">*</span><span class="sub-text">安全认证：</span> </label>
                                    <div class="formControls col-xs-8 col-sm-9">

                                        <select name="authenticate" id="authenticate" v-model="Model.authenticate" class="input-text" style="width: 33%">
                                            <option value="APP" selected>Authorization Code</option>
                                            <option value="ANONYMOUS">无认证</option>
                                            <option value="APPOPENID">OpenId 授权</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>API状态：</label>
                                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                                        <div class="radio-box">
                                            <input name="status" type="radio" id="status-enabled" v-model="Model.status" value="0">
                                            <label for="status-enabled">启用</label>
                                        </div>
                                        <div class="radio-box">
                                            <input type="radio" id="status-disabled" name="status" v-model="Model.status" value="1">
                                            <label for="status-disabled">禁用</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3">API描述：</label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <textarea name="description" cols="" rows="" class="textarea" placeholder="不超过200个字符" maxlength="200" v-model.trim="Model.description"></textarea>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-border table-bordered table-bg table-large" style="margin-top: 10px;">
                        <thead><tr><th>请求基础定义</th></tr></thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="row cl">
                                        <label class="form-label col-xs-4 col-sm-3" for="protocol"><span class="c-red">*</span><span class="sub-text">协议：</span> </label>
                                        <div class="formControls col-xs-8 col-sm-9">
                                            <select name="protocol" id="protocol" class="input-text" style="width: 33%" v-model.trim="Model.protocol">
                                                <option value="HTTP">HTTP</option>
                                                <option value="HTTPS">HTTPS</option>
                                                <option value="HTTP,HTTPS">HTTP和HTTPS</option>
                                                <option value="FunctionCompute">FunctionCompute</option>
                                            </select>
                                            <div class="sub-text">FunctionCompute 是指通过通过代码实现的复杂接口请求</div>

                                        </div>
                                    </div>
                                    <div class="row cl">
                                        <label class="form-label col-xs-4 col-sm-3" for="service_address"><span class="c-red">*</span><span class="sub-text">服务地址：</span> </label>
                                        <div class="formControls col-xs-8 col-sm-9">
                                            <input type="text" class="input-text valid" style="width: 33%" v-model.trim="Model.service_address" placeholder="格式：http(s)://host:port" name="service_address">
                                            <div class="sub-text">服务地址指API网关调用底层服务时的域名或者IP，不包含Path</div>
                                        </div>
                                    </div>
                                    <div class="row cl">
                                        <label class="form-label col-xs-4 col-sm-3" for="request-path"><span class="c-red">*</span><span class="sub-text">路径：</span> </label>
                                        <div class="formControls col-xs-8 col-sm-9">
                                            <input type="text" class="input-text valid" style="width: 33%" v-model.trim="Model.request_path" placeholder="示例：/api/order/get" id="request-path" name="request-path">
                                            <div class="sub-text">请求Path必须包含请求参数中的Parameter Path，包含在[]中，比如/getUserInfo/[userId]</div>
                                        </div>
                                    </div>
                                    <div class="row cl">
                                        <label class="form-label col-xs-4 col-sm-3" for="request_http_method"><span class="c-red">*</span><span class="sub-text">方法：</span> </label>
                                        <div class="formControls col-xs-8 col-sm-9">

                                            <select name="request_http_method" id="request_http_method" class="input-text" style="width: 33%" v-model.trim="Model.request_http_method">
                                                <option value="GET">GET</option>
                                                <option value="POST">POST</option>
                                                <option value="PATCH">PATCH</option>
                                                <option value="PUT">PUT</option>
                                                <option value="DELETE">DELETE</option>
                                                <option value="HEAD">HEAD</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row cl">
                                        <label class="form-label col-xs-4 col-sm-3" for="service_timeout"><span class="c-red">*</span><span class="sub-text">超时时间：</span> </label>
                                        <div class="formControls col-xs-8 col-sm-9">
                                            <input type="number" class="input-text valid" style="width: 33%" v-model.number="Model.service_timeout" placeholder="超时时间" name="service_timeout" maxlength="6"> ms
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-border table-bordered table-bg table-large" style="margin-top: 10px;">
                        <thead><tr><th colspan="8">请求参数定义</th></tr></thead>
                        <tbody>
                        <tr>
                            <td>参数名称</td>
                            <td>参数位置</td>
                            <td>默认值</td>
                            <td>示例值</td>
                            <td>必填</td>
                            <td>正则校验</td>
                            <td>参数描述</td>
                            <td>操作</td>
                        </tr>
                        <template>
                        <tr v-for="(Parameter,Index) in Parameters">
                            <td>
                                <input type="text" class="input-text valid" v-model.trim="Parameter.param_name" placeholder="参数名称" name="param_name[]">
                            </td>
                            <td>
                                <select name="param_location" class="input-text" v-model.trim="Parameter.param_location">
                                    <option value="PATH">PATH</option>
                                    <option value="QUERY">QUERY</option>
                                    <option value="BODY">BODY</option>
                                    <option value="HEAD">HEAD</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" class="input-text valid" v-model.trim="Parameter.default_value" name="default_value[]" placeholder="默认值" maxlength="50">
                            </td>
                            <td>
                                <input type="text" class="input-text valid" v-model.trim="Parameter.demo_value" name="demo_value[]" placeholder="示例值"  maxlength="500">
                            </td>
                            <td>
                                <input type="checkbox" v-model="Parameter.is_required" :true-value="1" :false-value="0" placeholder="必填" name="is_required[]">
                            </td>
                            <td>
                                <input type="text" class="input-text valid" v-model.trim="Parameter.regular_expression" placeholder="正则校验" name="regular_expression[]">
                            </td>
                            <td>
                                <input type="text" class="input-text valid" v-model.trim="Parameter.description" placeholder="参数描述" name="description[]">
                            </td>
                            <td>
                                <a href="javascript:;" @click="removeParameter(Index)">移除</a>
                            </td>
                        </tr>
                        </template>
                        <tr>
                            <td colspan="8">
                                <a class="btn btn-success" id="button-parameter-add" @click="addParameter()">增加一条</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-border table-bordered table-bg table-large" style="margin-top: 10px;">
                        <tr>
                            <td>
                                <div class="row cl">
                                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                                        <input class="btn btn-primary radius" type="button" @click="submitConnectorForm()" value=" 提交">
                                        <a href="{{ url('group/list') }}" title="返回列表" class="btn btn-default radius">&nbsp;&nbsp;返回&nbsp;&nbsp;</a>
                                        <span style="display: inline-block;margin-left: 20px;font-size: 12px;" id="error-message"><?php $this->flashSession->output()?></span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </form>
            </article>
        </div>
    </section>

{% endblock %}
{% block scripts %}
    <script type="text/javascript">
        var app = new Vue({
           el : "#form-connector-edit",
            delimiters : ['${','}'],
            data : {
                Parameters : {{ Parameters }},
                Model : {{ Model|json_encode }}
            },
            methods : {
               addParameter : function () {
                   console.log('a');
                   this.Parameters.push({param_name:'',service_address:'',param_location:'QUERY',default_value:'',is_required:false,regular_expression:'',description:''})
               },
                removeParameter : function ($index) {
                    this.Parameters.splice($index);
                },
                submitConnectorForm : function () {
                    console.log(this.Parameters);
                    console.log(this.Model);
                }
            }
        });

    </script>
{% endblock %}